import {defineComponent,watch,ref,onMounted,nextTick} from 'vue';
import {renderMarkdown} from './markdown-it';
import './markdown.scss';

export const MD = defineComponent({
  name:'MD',
  props:{
    content: {type: String, required: true}
  },
  setup(props){
    const md_ref = ref(null);

    /*watch(() => props.content, async (val) => {
      //第一次拿到val是在md_ref获取到值之前, 故这里nextTick了一下
      await nextTick();
      renderMarkdown(val, md_ref.value as any as HTMLElement);
    },{immediate:true});*/
    //↑ 上面这样写虽然简介, 但是... 第一次渲染会是异步的, 如果其它组件有依赖这里渲染的结果, 处理起来就比较麻烦了(也要变成异步的)

    watch(() => props.content,(val) => {
      renderMarkdown(val, md_ref.value as any as HTMLElement);
    });
    onMounted(() => {
      renderMarkdown(props.content, md_ref.value as any as HTMLElement);
    });

    return () => {
      return <div class='md' ref={md_ref}/>
    };
  }
})
